<template>
  <div :style="{width,height}" :id="echart_id" class="czh_chart_container"></div>
</template>
<script>
import * as echarts from 'echarts';
import _ from 'lodash';

export default {
  name: 'BaseChart',

  props: {
    width: {
      type: String,
      default() {
        return '100%'
      }
    },
    height: {
      type: String,
      default() {
        return '100%'
      }
    },
    //TODO 常用option后期采用mixin方式
    grid: {
      type: Object,
      default() {
        return {
          left: 50,
          right: '20%',
          top: 50,
          bottom: 50,
          containLabel: true
        }
      }
    },
    color: {
      type: Array,
      default() {
        return ['#0095A6', '#3FC9F8', '#FFA319', '#FF464A', '#E30D0D', '#F11BCB', '#fc8452', '#9a60b4', '#ea7ccc']
      }
    },
    legendVisible: {
      type: Boolean,
      default: true
    },
    setting: {
      type: Object,
      default() {
        return {
          itemStyle: {},
          label: {}
        };
      }
    },
    dataset: {
      type: Array,
      default() {
        return [
          ["name", "label"],
          ["第1列", "10"],
          ["第2列", "20"],
          ["第3列", "30"],
        ]
      }
    },
    extend: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    return {
      option: {}
    }
  },
  computed: {
    echart_id() {
      return 'bar-' + Math.floor(Math.random() * 1000000000);
    }
  },
  created() {
    this.option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        textStyle: {
          color: '#fff',
        },
        orient: 'vertical',
        right: 0,
        top: "15%"
      },
      /**
       常用属性
       axisTick: {
            show: false
          },
       axisLine: {
            show: true
          },
       axisLabel: {
            show: true,
          },
       splitLine: {
            show: false,
            lineStyle: {
              type: "dotted"
            }
          }
       * */
      series: [{type: 'bar'}]
    }
  },
  mounted() {
    if (this.dataset[0].length > 2) {
      //2个系列以上的情况
      this.option.series = new Array(this.dataset[0].length - 1).fill(this.option.series[0]);
    }
    this.drawCharts();
  },
  watch: {
    dataset: {
      deep: true,
      handler(val) {
        // console.log("dataset has changed")
        if (val[0].length > 2) {
          //2个系列以上的情况
          this.option.series = new Array(val[0].length - 1).fill(this.option.series[0]);
        }
        this.drawCharts();
      }
    },
    legendVisible(val) {
      this.setOption('legend.show', val);
      this.updateChart();
    },
    extend: {
      deep: true,
      handler(val) {
        console.log('extend has changed', {val})
        this.setExtend(val)
        this.updateChart()
      }
    }
  },
  methods: {
    drawCharts() {
      let myChart = echarts.getInstanceByDom(document.getElementById(this.echart_id)); //有的话就获取已有echarts实例的DOM节点。
      if (myChart == null) { // 如果不存在，就进行初始化。
        myChart = echarts.init(document.getElementById(this.echart_id));
      }

      this.setOption("color", this.color);
      this.setOption("legend.show", this.legendVisible)
      this.setOption("dataset.source", this.dataset)
      this.setOption("grid", this.grid)

      this.setExtend(this.extend);
      //设置setting
      if (!_.isEmpty(this.setting.itemStyle)) {
        this.option.series[0].itemStyle = this.setting.itemStyle;
      }
      if (!_.isEmpty(this.setting.label)) {
        this.option.series[0].label = this.setting.label;
      }
      // console.log("option", this.option);
      myChart.setOption(this.option);
    },
    setOption(key, val) {
      _.set(this.option, key, val)
    },

    setExtend(extend) {
      //extend图表原有属性
      if (!_.isEmpty(extend)) {
        _.keys(extend).forEach((key) => {
          if (_.has(this.option, key)) {
            //递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象。如果目标值存在，被解析为undefined的sources 来源对象属性将被跳过。
            _.merge(this.option[key], (_.isFunction(extend[key]) ? extend[key](this.option[key]) : extend[key]))
          } else {
            this.option[key] = _.isFunction(extend[key]) ? extend[key]() : extend[key];
          }
        })
      }
    },

    //更新图表
    updateChart() {
      let myChart = echarts.getInstanceByDom(document.getElementById(this.echart_id));
      myChart.setOption(this.option);
    },
    //获取图表实例
    getInstance() {
      return echarts.getInstanceByDom(document.getElementById(this.echart_id));
    },
    //获取定义过的配置
    getOption() {
      return this.option
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
